<template>
  <view class="shop-item" :class="[bgChangeColor]">
    <!--  顶部图片介绍  -->
    <view class="top">
      <view class="img">
        <!-- <image :src="img" mode="aspectFill"></image> -->
        <u-swiper :list="list" height="100px"></u-swiper>
      </view>
      <view class="msg">
        <view class="top-txt1">
          <view class="logo">
            <image src="/static/image/userDetails/logo.jpg" mode="aspectFit"></image>
          </view>
          <view>{{ data.name }}</view>
        </view>
        <view @click="collect" style="padding: 0rpx 20rpx">
          <u-icon v-if="save == 0" size="50"
                  :name="isBoy?'/static/image/userDetails/boyColl.png':'/static/image/userDetails/girlColl.png'"></u-icon>
          <u-icon v-else size="50"
                  :name="isBoy?'/static/image/userDetails/boyCollFill.png':'/static/image/userDetails/girlCollFill.png'"></u-icon>
        </view>
      </view>
      <view class="adr">地址:{{ data.address }}</view>
    </view>
    <!--  商品列表  -->
    <view class="shop-list">
      <u-swiper v-if="swiperList.length != 0" :list="swiperList" :title="true" :effect3d="true"></u-swiper>
    </view>

    <!--  人物列表  -->
    <view class="list">
      <view class="list-item" @click="toShopOrder(item)" :class="[item.sex==2?'boy-bg':'girl-bg']"
            v-for="(item,id) in gamerList" :key="id">
        <view class="list-img">
          <image :src="IMG_URL + item.links[0].link" mode="scaleToFill"></image>
        </view>
        <view class="list-txt">
          <view class="name" :class="[txtColor]">
            <span :class="[txtColor]">{{ item.name }}</span>
            <span :class="[txtColor]">{{ item.age }}</span>
          </view>

          <view class="intro">{{ item.signature }}</view>
          <view style="display: flex">
            <view class="tag" v-for="(titleItem,index) in item.title" :key="index" :class="[bgColor]"> {{
                titleItem
              }}
            </view>
          </view>

          <view style="display: flex;margin: auto 5px 5px 0px;">
            <view class="icon">
              <image src="/static/image/userDetails/logo.jpg" mode="scaleToFill"></image>
            </view>
            <view :class="[txtColor]" style="line-height: 50rpx;font-size: 40rpx">{{ item.price }} 币/小时</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getDetailsShops, saveShop} from "../../../api/shop.js";
import {IMG_URL} from "../../../config/URL";

export default {
  name: "index",
  onLoad(option) {
    let deliverData = JSON.parse(decodeURIComponent(option.data))
    this.businessId = deliverData.businussId
    // this.save = deliverData.save
    // console.log("onload"+this.businessId)
    this.getBusinessInfo()
  },
  data() {
    return {
      IMG_URL,
      userData: {
        gender: 1,
      },
      isCollect: false,
      /*      img: '',
            address: '',
            name: '', */
      data: {},
      save: 0,
      businessId: 0,
      gamerList: [],
      list: [
        // {
        //   image: "https://img0.baidu.com/it/u=2161987666,4267232203&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        // },
        // {
        //   image: "https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        // },
        // {
        //   image: "https://img2.baidu.com/it/u=3209093749,3257663798&fm=253&fmt=auto&app=138&f=JPEG?w=508&h=500",
        // }
      ],
      swiperList: [],

    }
  },
  methods: {
    toShopOrder(item) {
      let data = {
        businessAddress: this.data.address,
        businessName: this.data.name,
        gamerId: item.id,
        mobile: this.data.mobile,
      }
      uni.navigateTo({
        // 参数传递
        url: `/subPages/subShops/shopOrder/index?data=${encodeURIComponent(JSON.stringify(data))}`

      })
    },
    async getBusinessInfo() {
      const businessInfo = await getDetailsShops({
        id: this.businessId,
      });
      // console.log(businessInfo);
      /*      this.img = businessInfo.data.data.cover;
            this.name = businessInfo.data.data.name;
            this.address = businessInfo.data.data.address; */
      this.data = businessInfo.data.data;
      this.gamerList = businessInfo.data.data.gamers;
      this.save = businessInfo.data.data.save;
      this.list = businessInfo.data.data.links;

      let goods = JSON.parse(JSON.stringify(businessInfo.data.data.goods))
      goods.map(e => {
        this.swiperList.push({image:IMG_URL + e.link, title: e.title})
      })
      // console.log(this.gamerList)
    },
    async collect(save) {
      //收藏商家接口逻辑
      this.save === 1 ? this.save = 0 : this.save = 1
      //收藏商家接口逻辑
      const userInfo = uni.getStorageSync('userInfo');
      const userId = userInfo.id;
      // this.isCollect=!this.isCollect;
      // console.log(userId);
      const res = await saveShop({
        f_business_id: this.businessId,
        f_user_id: userId,
      })
      // console.log(res.data.data);
    }
  },
  computed: {
    // '男' = 2  '女' = 1
    bgColor() {
      let color = (this.userData.gender == 2 ? 'blue' : 'red')
      return `zy-dark-bg-${color}`
    },

    txtColor() {
      let color = (this.userData.gender == 2 ? 'blue' : 'red')
      return `zy-dark-${color}`
    },

    bgChangeColor() {
      let gender = (this.userData.gender == 2 ? 'boy' : 'girl')
      return `${gender}-bg`
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/css/color.scss";

.shop-item {
  min-height: 100vh;

  .top {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 20rpx 30rpx;
    background-color: white;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    z-index: 10;

    .img {
      flex: 4;
      border-radius: 20rpx;
      overflow: hidden;

      image {
        height: 100%;
        width: 100%;
        width: 100%;
      }
    }

    .msg {
      margin: 20rpx 0rpx;
      display: flex;
      justify-content: space-between;

      .top-txt1 {
        flex: 1;
        display: flex;
        font-size: 50rpx;
        font-weight: bold;

        .logo {
          height: auto;
          width: 100rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .top-txt2 {
        padding: 0rpx 40rpx;
        border-radius: 50rpx;
        height: 40rpx;
        color: white;
        margin-top: 10rpx;
      }
    }

    .adr {
      margin-left: 20rpx;
      margin-bottom: 10rpx;
    }
  }

  .shop-list {
    margin-top: 520rpx;
  }

  .list {
    padding: 20rpx;

    .list-item {
      background-color: #6CC7E2;
      height: 260rpx;
      display: flex;
      border-radius: 30rpx;
      margin-bottom: 20rpx;
      overflow: hidden;

      .list-img {
        flex: 1;
        height: 100%;
        border-radius: 25rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .list-txt {
        padding-right: 10rpx;
        flex: 1.5;
        display: flex;
        flex-direction: column;
        //background-color: #3F536E;
        height: 100%;
        margin-left: 20rpx;

        .name {
          :nth-of-type(1) {
            font-size: 40rpx;
            margin-right: 20rpx;
          }

          :nth-of-type(2) {
            font-size: 20rpx;
          }
        }

        .intro {
          margin: 20rpx 0rpx;
          word-wrap: break-word;
          font-size: 20rpx;

        }

        .tag {
          padding: 5rpx 20rpx;
          border-radius: 10rpx;
          color: white;
          margin-right: 10rpx;

        }

        .icon {
          margin-left: auto;
          margin-right: 10rpx;
          height: 50rpx;
          width: 50rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

  }

  .boy-bg {
    background: linear-gradient(white, $zy-pool-blue 150%);
  }

  .girl-bg {
    background: linear-gradient(white, $zy-pool-red 150%);
  }
}
</style>
